<template>
    <div class="app-container video">
        <div class="content">
            <div class="item" v-for="(item,index) in 9" :key="index">
                <span class="video-cover">
                    <img src="/static/images/base/music.png" alt="">
                </span>
                <span class="title">小说2018</span>
            </div>
        </div>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  components: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="less" scoped>
.video {
  width: 100%;
  .content {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 30px;
    .item {
      display: flex;
      width: 320px;
      padding-left: 100px;
      margin-top: 20px;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 24px;
      margin-bottom: -1px;
      .video-cover {
        background: url("/static/images/base/muisc-box.png") no-repeat;
        background-size: cover;
        display: block;
        width: 178px;
        height: 150px;
        border-radius: 10px;
        position: relative;
        img{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
      }
      .title {
        font-size: 18px;
        margin-left: 38px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .item:nth-child(3n + 1) {
      padding-left: 0px;
    }
  }
}
</style>


